<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="base">

<head>
	<meta charset="UTF-8" />
	<title th:text="#{detail}">详情</title>

	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/pageJquery/css/zxf_page.css"/>
	<link href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet"/>

	<style>
        .ui-jqgrid-htable{
            height: 50px;font-size: 14px;color: #80909c;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable th div {
            overflow: hidden;
            position: relative;
            height: 50px;
            padding-top: 5px;color: #BBC5D2;font-weight: 800;
        }
        .ui-jqgrid .ui-jqgrid-resize {
            height: 50px !important;
            position: relative;
            cursor: e-resize;
            display: inline;
            overflow: hidden;
        }
        .ui-jqgrid tr.jqgrow {
            outline-style: none;
            height: 50px;
        }
        .ui-jqgrid tr.ui-row-ltr td {
            text-align: left;
            border-right-width: 0px;
            border-right-color: inherit;
            border-right-style: solid;
            color: #333333;
            font-size: 14px;
            font-weight: 400;
        }
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
            border: 0px solid #fcd3a1;
            background: #fbf8ee;
            color: #444;
        }
        .ui-widget-content {
            border: 1px solid #eee;
            background: #fff;
        }
        .ui-jqgrid tr:nth-child(even) {
            background: #F5F9FA;
        }
        .ui-jqgrid tr:nth-child(odd) {
            background: #FFFFFF;
        }
        .ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 40px;
		    margin-top: 5px;
		    display: inine-block;
		}
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
            border: 0px solid #d8dcdf;
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: rgb(216, 220, 223);
            border-bottom-color: rgb(216, 220, 223);
            border-left-color: rgb(216, 220, 223);
            background: #FFFFFF;
            font-weight: normal;
            color: #555;
        }
        .jumbotron{
            padding: 0%;background: #FFFFFF;
        }
        .container{

        }
        .container .jumbotron {
            padding-left: 0px;
            padding-right: 0px;
        }.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px;
            line-height: 1.8;
            vertical-align: top;
            border-top: 0px solid #dddddd;
            font-size: 14px;
        }
        .aaa{
            text-align: right;width: 26%;
            color: #A1ACB2;
        }
        .bbb{
            padding-left: 30px;
            color: #5A7387;
        }
        .aaaa{
            text-align: center;
            color: #A1ACB2;height: 48.5px;
        }
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #E1E3E8;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: rgb(221, 221, 221);
        }
        body{ font: 62.5%/1.4 Arial Sans-serif; ... }
        .wrapper{ min-width:600px; width:98%; margin: 0 auto; }
        .wrapper .content{ min-width:400px; width:70%; ... }
        .wrapper .sidebar{ min-width:180px; width:28%; ... }
        .wrapper h1{ font-size:2em; }
        .wrapper p{ padding: 0 0 1em; }
        .iotx-name{
            font-size: 15px;
        }
        .iotx-time {
            width: 26%;
            height: 80%;
            float: right;
            margin-top: 2%;
        }
        .warnings-img {
            padding-top: 0%;
        }
    </style>

	<script type="text/javascript" src="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/src/i18n/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/webResources/plugins/pageJquery/js/zxf_page.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/page/createPage.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/detail.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/repairRecord.js"></script>
	<script type="text/javascript" src="/webResources/plugins/phaser/phaser.min.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/topology.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/deviceAlarm.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/deviceHealth.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/device/materiel.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jquery-BlockUI/jquery.blockUI.js" ></script>

</head>

<body>
	<div layout:fragment="content" >
		<input type="hidden" th:value="${deviceId}" id="deviceId" name="deviceId"/>
		<input type="hidden" th:value="${serialNo}" id="deviceSN" name="deviceSN"/>
		<div class="table-top">
	        <div class="title-big" th:text="#{detail}">
	            	设备详情
	        </div>
	        <div class="title-small">
	            >
	        </div>
	        <a href="javascript:void(0)" onclick="javascript:history.go(-1);return false;" >
		    	<button class="back" th:text="#{return}"></button>
		    </a>
	    </div>
	    <div class="container" style="padding-top: 30px;padding-left: 50px;">
	        <div class="jumbotron device-detail-info" style="background: #F4F6F9">
	            <div class="title-div" th:text="#{device.message}">
	                	设备信息
	            </div>
	            <div id="detail" class="title-div-deviceInfo" v-cloak="v-cloak">
	                <div class="col-lg-4" style="height: 100%">
	                    <div style="width: 100%;height: 75%;">
	                        <img src="/webResources/img/device/直流设备.png" style="width:100%;margin-top:50%;"/>
	                    </div>
	                    <div style="width: 100%;height: 25%;text-align: center">
	                    	<button id="upload" class="document-button" th:text="#{document.upload}">
	                            	上传
	                        </button>
	                        <button id="viewDocument" class="document-button" th:text="#{device.document}">
	                            	技术文档
	                        </button>
	                    </div>
	                </div>
	                <div class="col-lg-8" style="height: 100%">
	                    <table class="table" style="margin-top: 10px">
	                        <tbody>

	                        <tr>
	                            <td class="aaa" th:text="#{customerService.projectName}">企业名称：</td>
	                            <td class="bbb">{{detailData['project.name']}}</td>

	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{customerService.projectNo}">企业编号：</td>
	                            <td class="bbb">{{detailData['project.number']}}</td>

	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{customerService.projectLocation}">企业地址：</td>
	                            <td class="bbb">{{detailData['project.location']}}</td>
	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{customerService.productName}">产品名称：</td>
	                            <td class="bbb">{{detailData.productName}}</td>

	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{customerService.productSpecifications}">产品规格：</td>
	                            <td class="bbb">{{detailData.productSpecifications}}</td>

	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{customerService.productNo}">产品编号：</td>
	                            <td class="bbb">{{detailData.productNo}}</td>
	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{device.commissioningTime}">投运时间：</td>
	                            <td class="bbb">{{detailData.commissioningTime}}</td>

	                        </tr>
	                        <tr>
	                            <td class="aaa" th:text="#{device.serialNo}">设备序列号：</td>
	                            <td class="bbb">{{detailData.serialNo}}</td>
	                        </tr>
	                        </tbody>
	                    </table>
	                </div>
	            </div>
	        </div>
	        <div id="paging" class="jumbotron device-technology-info" style="background: #F4F6F9">
	            <div class="title-div">
                	<span th:text="#{device.technicalParameter}">技术参数</span>
                	<a v-if="last" href="#" v-on:click="nextPageClick" style="float: right;margin-right: 2%">
	                    <img src="/webResources/img/page/nextPage.png"/>
	                </a>
	                <a v-if="!last" style="float: right;margin-right: 2%">
	                	<img src="/webResources/img/page/nextPage_un.png"/>
	                </a>
                	<a v-if="first" href="#" v-on:click="lastPageClick" style="float: right;margin-right: 2%">
		                <img src="/webResources/img/page/lastPage.png"/>
	                </a>
	                <a v-if="!first" style="float: right;margin-right: 2%">
	                	<img src="/webResources/img/page/lastPage_un.png"/>
	                </a>
	            </div>
	            <div class="title-div-technologyInfo">
                    <div class="data-table">
	                    <table id="parameterTable"></table>
	                    <div id="parameterPager"></div>
	                </div>
	            </div>
	        </div>

	        <!-- 拓扑图 -->
	        <div class="jumbotron col-lg-9" style="border-radius:0px;float:left;height:660px;margin-top: -30px;opacity:0.85;background:#4D4948;">
            	<div id="topology" style="width:100%;height:100%">

	            </div>
	        </div>


	        <div id="deviceAlarm" class="jumbotron col-lg-3" style="border-radius:0px;float:left;height:660px;margin-top: -30px;opacity:0.85" v-cloak="v-cloak">
	            <!-- 健康状态 -->
	            <div class="jumbotron col-lg-12" style="background: #F1F7F9;height: 30%" id="healthindex">

	            </div>
	            <!-- 告警 -->
	            <div class="jumbotron col-lg-12" style="background: #F1F7F9;height: 70%">
	                <div class="iotx-top-right-warnings">
	                    <div v-for="alarmData in alarmDatas" class="warnings">
	                        <div class="warnings-img">
	                            <img src="/webResources/img/iotx/warning.png"/>
	                        </div>
	                        <div class="iotx-name">
	                            <div class="iotx-name-detail" style="color: #757575">
	                                IOT-X:{{alarmData['sensor.dust.iotx.serialNo']}}
	                            </div>
	                            <div class="iotx-name-detail" style="color: #E56A38">
	                                	{{alarmData.level}}
	                            </div>
	                        </div>
	                        <div class="time-img">
	                            <img src="/webResources/img/iotx/times.png"/>
	                        </div>
	                        <div class="iotx-time">
	                            <div class="iotx-time-top">
	                                {{alarmData.collectTime | yearFormat}}
	                            </div>
	                            <div class="iotx-time-down">
	                                {{alarmData.collectTime | timeFormat}}
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="jumbotron col-lg-12" style="margin-top: -10px;">
		        <div class="title-div" th:text="#{materiel.predictive.maintenance}">
		           	 预测性维护
		        </div>
		        <div id="materielSearch" class="col-lg-12" style="padding-left: 0%;padding-right: 0%;">
		            <div class="company-select" style="height: 40px">
		                <div class="company-button" style="height:85%;margin-right: 2%;">
		                    <button v-on:click="downloadTemplate" class="company-button-new" style="height: 100%;margin-top: 0%" th:text="#{template.download}">
		                        	模板下载
		                    </button>
		                </div>
		                <div class="company-button" style="height:85%;margin-right: 1%;">
		                    <button v-on:click="batchSave" class="company-button-new" style="background:#00ABF7;height: 100%;margin-top: 0%" th:text="#{batadd}">
		                        	批量导入
		                    </button>
		                </div>
		                <div class="company-button" style="height:85%;margin-right: 1%;width:5%;">
		                    <button id="addMateriel" class="company-button-new" style="background:#00ABF7;height: 100%;margin-top: 0%" th:text="#{add}">
		                       	 新增
		                    </button>
		                </div>
		                <div class="company-search" style="float: left;margin-left:1%;margin-top: -1%;margin-right: 2%">
	                        <div class="input-group input-medium">
	                            <input v-model="searchContent" class="form-control" th:placeholder="#{searchContent}" type="text" style="height: 31px"/>
	                            <span class="input-group-btn">
			                        <button id="searchMateriel" class="btn btn-success" style="background: #FC8060;border: 0px"><i class="fa fa-search"></i></button>
			                    </span>
	                        </div>
		                </div>
		            </div>
		            <table id="materielTable"></table>
		            <div id="materielPager"></div>
		        </div>
		    </div>

	        <div class="jumbotron col-lg-12" style="margin-top: -10px;">
	            <div class="title-div" th:text="#{device.repair.record}">
	                	维修记录
	            </div>
	            <div class="data-table">
                    <table id="recordTable"></table>
                    <div id="recordPager"></div>
                </div>
	        </div>

	        <!-- 线图 -->
	        <!-- <div class="jumbotron col-lg-12"  style="margin-top: 0px;">
	            <div class="col-lg-12" id="charts" style="height: 345px;border: solid #E1E3E8 1px;">
	            </div>
	        </div> -->
	    </div>
	</div>
</body>


</html>

